<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>phpsafe--PHP开发之Thinkphp实现Ajax地区三级联动</title>
   <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<form autocomplete="off" action="{:U('Index/user_add')}" method='post'>
<select name="pro" id="pro">
	<option value="0">--请选择市区--</option>
    <foreach name="region" item="v">
		<option value="{$v.id}">{$v.region_name}</option>
    </foreach>
</select>
<select name="city" id="city">
	<option>--请选择市区--</option>
</select>
<select name="area" id="area">
	<option>--请选择市区--</option>
</select>
<p>授权人：<input type='text' name='u_name' value=''></p>
<p>授权手机号：<input type='text' name='u_phone' value=''></p>
<p>邮箱：<input type='text' name='u_email' value=''></p>
<p>密码：<input type='text' name='u_pass' value=''></p>
<input type='submit' value='提交'>
</form>
</body>
</html>
<script>
    $('#pro').change(function(){
        $.ajax({
            type:"post",
            url:"{:U('Index/chengshi')}",
            data:'pro_id='+$('#pro').val(),
            dataType:"json",
            success:function(data){
                  $('#city').html(data);
            }
        }).fail((err) => {
            alert('通信失败，请检查网络')
            throw new Error('请检查网络')
        })
    });
	$('#city').change(function(){
    $.ajax({
        type:"post",
        url:"{:U('Index/chengshi')}",
        data:'pro_id='+$('#city').val(),
        dataType:"json",
        success:function(data){
            $('#area').html(data);
        }
    }).fail((err) => {
        alert('通信失败，请检查网络')
        throw new Error('请检查网络')
    })
});
</script>